<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改摄像头信息')" />
	<style>
		.hide{
			display: none;
		}
		.flex-spacbtw{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-aiCamera-edit" th:object="${aiCamera}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头编码：</label>
				<div class="col-sm-8">
					<input id="code" name="code" class="form-control" th:field="*{code}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" th:field="*{name}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">产品型号：</label>
				<div class="col-sm-8">
					<input id="productName" name="productName" class="form-control" th:field="*{productName}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户名：</label>
				<div class="col-sm-8">
					<input id="account" name="account" class="form-control" th:field="*{account}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-8">
					<input id="password" name="password" class="form-control" th:field="*{password}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">IP：</label>
				<div class="col-sm-8">
					<input id="ip" name="ip" class="form-control" th:field="*{ip}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">使用的算法：</label>
				<div class="col-sm-8">
					<input id="process" name="process" class="form-control" th:field="*{process}" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">灵敏度：</label>
				<div class="col-sm-8">
					<input id="sensitive" name="level" class="form-control" th:field="*{level}" type="hidden">
					<div id="slideSensitive"></div>
					<div class="slideTitle flex-spacbtw" style="margin-top:5px"><span>低</span><span>中</span><span>高</span></div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">功能：</label>
				<div class="col-sm-8">
					<select id="function" name="function" class="form-control" th:field="*{function}">
						<option value="0">入侵</option>
						<option value="待定">待定</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">布防时间：</label>
				<div class="col-sm-8 input-daterange input-group" style="padding-left: 15px;padding-right: 15px;">
					<input type="text" class="input-sm form-control" id="laydate-startTime" name='startTime' th:field="*{startTime}" placeholder="yyyy-MM-dd"/>
					<span class="input-group-addon">至</span>
					<input type="text" class="input-sm form-control" id="laydate-endTime" name='endTime' th:field="*{endTime}" placeholder="yyyy-MM-dd"/>
				</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-3 control-label">告知方式：</label>
				<div class="col-sm-8">
					<div class="radio check-box">
						<label style="padding-left: 5px;"><input type="radio" value="0" name="ways" th:field="*{ways}">app</label>
					</div>
					<div class="radio check-box">
						<label style="padding-left: 5px;"><input type="radio" checked="" value="1" name="ways" th:field="*{ways}">邮件</label>
					</div>
				</div>
			</div>
			<!-- <div class="form-group">	
				<label class="col-sm-3 control-label">摄像头编码：</label>
				<div class="col-sm-8">
					<input id="code" name="code" th:field="*{code}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头名字：</label>
				<div class="col-sm-8">
					<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">产品型号：</label>
				<div class="col-sm-8">
					<input id="productName" name="productName" th:field="*{productName}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头ip：</label>
				<div class="col-sm-8">
					<input id="ip" name="ip" th:field="*{ip}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头账号：</label>
				<div class="col-sm-8">
					<input id="account" name="account" th:field="*{account}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头密码：</label>
				<div class="col-sm-8">
					<input id="password" name="password" th:field="*{password}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">使用的算法：</label>
				<div class="col-sm-8">
					<input id="process" name="process" th:field="*{process}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">灵敏度（1， 2， 3）：</label>
				<div class="col-sm-8">
					<input id="level" name="level" th:field="*{level}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">告知方式(0-app,1-邮件)：</label>
				<div class="col-sm-8">
					<input id="ways" name="ways" th:field="*{ways}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">功能(0-入侵，待定)：</label>
				<div class="col-sm-8">
					<input id="function" name="function" th:field="*{function}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">创建时间：</label>
				<div class="col-sm-8">
					<input id="createTime" name="createTime" th:field="*{createTime}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">开始时间：</label>
				<div class="col-sm-8">
					<input id="startTime" name="startTime" th:field="*{startTime}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">结束时间：</label>
				<div class="col-sm-8">
					<input id="endTime" name="endTime" th:field="*{endTime}" class="form-control" type="text">
				</div>
			</div> -->
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "door/aiCamera";
		$("#form-aiCamera-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-aiCamera-edit').serialize());
	        }
	    }
		$(function(){
			setLayui();
		})

		// 渲染layui组件
		function setLayui(){
			layui.use('laydate', function(){
				var laydate = layui.laydate;
				var startDate = laydate.render({
		        elem: '#laydate-startTime',
		        max: $('#laydate-endTime').val(),
				theme: 'molv',
				type: 'datetime',
		        trigger: 'click',
		        done: function(value, date) {
		            // 结束时间大于开始时间
		            if (value !== '') {
		                endDate.config.min.year = date.year;
		                endDate.config.min.month = date.month - 1;
		                endDate.config.min.date = date.date;
		            } else {
		                endDate.config.min.year = '';
		                endDate.config.min.month = '';
		                endDate.config.min.date = '';
		            }
		        }
		      });
       		
		      var endDate = laydate.render({
		        elem: '#laydate-endTime',
		        min: $('#laydate-startTime').val(),
				theme: 'molv',
				type: 'datetime',
		        trigger: 'click',
		        done: function(value, date) {
		            // 开始时间小于结束时间
		            if (value !== '') {
		                startDate.config.max.year = date.year;
		                startDate.config.max.month = date.month - 1;
		                startDate.config.max.date = date.date;
		            } else {
		                startDate.config.max.year = '';
		                startDate.config.max.month = '';
		                startDate.config.max.date = '';
		            }
		        }
		      });
       	   
			})
			
			layui.use('slider', function(){
				var slider = layui.slider;
				
				//渲染
				slider.render({
					elem: '#slideSensitive',  //绑定元素
					step:1,
					min:1,
					max:3,
					showstep:true,
					change:function(value){
						$("#sensitive").val(value)
					}
				});
			});
		}
	
	</script>
</body>
</html>
